<template>
	<view class="head">

		<view>
			<view class="me_img">
				<image class="image" :src="userimg" mode="aspectFit"></image>
				<view class="bigsize">{{name}}</view>
				<view class="minsize">ID:{{unionId }}</view>
			</view>
		</view>
		<!-- 其他信息 -->
		<view class="list_all" style="margin: 20rpx auto;">
			<text>基本信息</text>
			<view style="border-bottom: 1rpx solid #e7e7e7; display: flex; justify-content: space-between;">
				<view class="size">性别：</view>
				<view class="size">{{gender }}</view>
			</view>
			<view style="border-bottom: 1rpx solid #e7e7e7; display: flex; justify-content: space-between;">
				<view class="size">城市：</view>
				<view class="size">{{city}}</view>
			</view>
			<view style="border-bottom: 1rpx solid #e7e7e7; display: flex; justify-content: space-between;">
				<view class="size">省份：</view>
				<view class="size">{{province}}</view>
			</view>

		</view>


		<view>
			<!-- 灰条 -->
			<view class="huitiao"></view>

			<view class="list_all">
				<view class="list1">
					<view class="after">
						<view class="size" style="font-size: 40rpx;">爱好/向往</view>
					</view>
					<view class=" bigsize" style="font-size: 40rpx;">😀😀😀😀😀</view>
				</view>

			</view>
		</view>
		<view>
			<view class="list_all">
				<view class="list1">
					<view class="after">
						<view class="size" style="font-size: 40rpx;">个性签名</view>
					</view>
					<view class="size" style="font-size: 40rpx;">加油并悄悄拔尖!</view>
				</view>
			</view>
		</view>
		<view v-show="moreshow">
			<view class="list_all">
				<view class="list1">
					<view class="after">
						<view class="size" style="font-size: 40rpx;">电话</view>
					</view>
					<view class=" size" style="font-size: 40rpx;">13640856565</view>
				</view>
			</view>
		</view>
		<view v-show="moreshow">
			<view class="list_all">
				<view class="list1">
					<view class="after">
						<view class="size" style="font-size: 40rpx;">来源</view>
					</view>
					<view class=" size" style="font-size: 40rpx;">朋友圈</view>
				</view>
			</view>
		</view>
		
		<view class="huitiao" ></view>
		<view >
			<view class="list_all">
				<view style="display: flex;justify-content: center;" @click="more">
					<view style="font-size: 40rpx;">{{msg}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	// 导入弹出vue
	import Modal from '../../components/x-modal/x-modal.vue';
	export default {
		data() {
			return {
				token: '',
				userimg: '',
				name: '',
				unionId: '暂无',
				gender: Math.round(Math.random())==1?"男":"女",
				city: '广州',
				province: '广东省',
				// 退出框
				show: false,
				moreshow:false,
				msg:'更多'
			}
		},
		methods: {
			
			
			sengmsg() {

			},
			more()
			{
				this.moreshow=!this.moreshow
				if(this.msg=="暂无更多")
				this.msg="更多"
				else
				this.msg='暂无更多'
				
				
			}
		},
		 onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		        console.log(option.pic); //打印出上个页面传递的参数。
				this.userimg=option.pic
				this.name=option.name
		      // 批量处理

		    },
		components: {
			Modal
		}
	}
</script>

<style lang="less" scoped>
	// 全局size
	.withsize {
		font-size: 40rpx;
	}

	.bigsize {
		font-size: 38rpx;
		font-weight: bold;
	}

	.size {
		font-size: 36rpx;
	}

	.minsize {
		font-size: 30rpx;
	}

	.head {
		.me_img {
			width: 90%;
			margin: 0 auto;

			.image {
				float: left;
				width: 125rpx;
				height: 125rpx;
				border-radius: 20rpx;
				margin-right: 25rpx;
			}
		}

		.list_all {
			width: 90%;
			// background-color: red;
			margin: 20rpx auto;

			.list1 {
				border-bottom: 2rpx solid #D9D9D9;
				display: flex;
				margin: 20rpx auto;
				justify-content: space-between;

				.after {
					display: flex;
				}


			}

			
		}
		// 灰条
		.huitiao {
			width: 110%;
			background-color: #efefef;
			height: 25rpx;
		
		}
	}
</style>
